<template>
	<view class="content">
		<!-- 搜索框 -->
		<view @click="goSearch">
			<uni-search></uni-search>
		</view>
		<!-- 轮播 -->
		<view>
			<!-- <view class="uni-margin-wrap"></view> -->
			<!-- :interval="interval" :duration="duration" @change="change" -->
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay">
				<swiper-item v-for="(item, index) in info" :key="index">
					<view class="swiper-item">
						<!-- :class="item.colorClass" -->
						<image class="image" :src="item.url" mode="aspectFill" />
					</view>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 测试分享 -->
		<!-- <view class="uni-flex uni-column">
			<video
			src = "https://audio.bfmtv.com/bfmbusiness_128.mp3?aw_0_1st.playerId=AudioPlayer_Web_Next"
			controls
			autoplay
			muted
			>
			</video>
			
			<view class="uni-flex">
				<button class="uni-common-mt" open-type="share">分享给朋友</button>
				
				<button class="uni-common-mt" open-type="share">分享朋友圈</button>
				
				<button class="uni-common-mt" @tap="toShare"> APP 分享 </button>
			</view>
		</view> -->
		
		<view class="uni-flex uni-common-mt">
			<view v-for="item in listhea" class="uni-flex uni-column uni-align-items" 
			:key ="item.content" 
			:style="'width:' + windowWidth + ';' + 'height:' + windowWidth"
			@click="goDestination(item.content)"
			>
				<image class="item-image" :src="item.url" mode="aspectFill" />
				<text class="uni-uploader-body">
					{{item.content}}
				</text>
			</view>
		</view>
		<view class="uni-common-mt uni-flex unit">
			<view v-for="(item,index) in listSub" 
			:key ="index" 
			@click="goDestination(item.title)"
			class="uni-flex uni-align-items unit-item">
				<view class="img_box">
					<image :src="item.url" mode="aspectFill" />
				</view>
				<view>
					<p class='unit-title'>
						{{item.title}}
					</p>
					<p class="unit-describe">
						{{item.describe}}
					</p>
				</view>
			</view>
		</view>
		<uni-section type="line" title="热门目的地"></uni-section>
		
		<view class="uni-hot-destination">
			<view class="destination" v-for="item in destination" :key="item.text" @click="goDestination(item.text,true)">
				<image :src="item.url" mode="aspectFill" />
				<text>{{item.text}}</text>
			</view>
		</view>
		
		<modal :show.sync="modalShow" :store="distanceArr"></modal>
		
		<!-- <uni-popup ref="popup">
			<view class="modal-dialog">
			  <view class="t-title">您拒绝了地理位置授权,需要重新设置</view>
			  open-type="openSetting" bindopensetting="handler"
			  <button class="showF" @click="handle">去设置</button>   
			</view>
		</uni-popup> -->
		
		
		
		
	</view>
</template>

<script>
	import uniSearch from "@/components/search/search.vue";
	import uniSection from '@/components/uni-section/uni-section.vue'
	var dateUtils = require('@/common/js/util.js').dateUtils;
	import modal from "../../components/notice/modal-in.vue"
	import uniPopup from   "@/components/uni-popup/uni-popup.vue"           
	
	
	import config from '@/common/js/config.js'
	const QQMapWX = require('../chooseAddress/js/qqmap-wx-jssdk.min.js')
	const qqmapsdk = new QQMapWX({
		key: config.qqmapWxKey
	})
	
	export default {
		// 分享到朋友圈
		onShareTimeline() {
			return {
				title: '商通线上商城',
				path: '/pages/destination/destination_f?text=国内',
				imageUrl: 'https://cdn.uviewui.com/uview/swiper/1.jpg'
			};
		},
		onShareAppMessage(res) {
		    if (res.from === 'button') {// 来自页面内分享按钮
		      console.log(res.target)
		    }
		    return {
		      title: '自定义分享标题',
			  desc:'自定义分享描述',
		      path: '/pages/destination/destination_f?text=国内'
		    }
		  },
		components:{
			uniSearch,
			uniSection,
			uniPopup,
			modal
		},
		data() {
			return {
				modalShow:false,
				distanceArr:[],
				indicatorDots:true,
				autoplay:true,
				windowWidth:'93px',
				info: [{
						colorClass: 'uni-bg-red',
						url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Ff1559cbe-5839-4322-88a8-1c16ac21be28%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1707892924&t=51a5ecae4498ddb12ea4cd2805504652',
						content: '内容 A'
					},
					{
						colorClass: 'uni-bg-green',
						url: 'https://img2.baidu.com/it/u=42836227,536469854&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800',
						content: '内容 B'
					},
					{
						colorClass: 'uni-bg-blue',
						url: 'https://img1.baidu.com/it/u=1300120052,4089645275&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
						content: '内容 C'
					}
				],
				listhea: [{
						url: '../../static/image/1.png',
						content: '国内'
					},
					{
						url: '../../static/image/2.png',
						content: '周边'
					},
					{
						url: '../../static/image/3.png',
						content: '自由行'
					},
					{
						url: '../../static/image/4.png',
						content: '海岛'
					}
				],
				listSub:[
					{
						title:'当季热销',
						describe:'值的一去 亲身体验',
						url:'../../static/image/hot_sale.png'
					},
					{
						title:'研学旅行',
						describe:'让孩子赢在起跑线',
						url:'../../static/image/travel_learn.png'
					},
					{
						title:'夕阳红之旅',
						describe:'父母游 尽情 舒心',
						url:'../../static/image/travel_old.png'
					},
					{
						title:'超值旅游套餐',
						describe:'超优惠 大礼包 畅游世界',
						url:'../../static/image/travel_price.png'
					}
				],
				current: 0,
				destination:[
					{
						text:'重庆',
						url:'https://m.jhly.cn/Public/images/ver3/yz.jpg'
					},
					{
						text:'云南',
						url:'https://m.jhly.cn/Public/images/ver3/yn.jpg'
					},
					{
						text:'西藏',
						url:'https://m.jhly.cn/Public/images/ver3/els.jpg'
					},
					{
						text:'泰国',
						url:'https://m.jhly.cn/Public/images/ver3/tg.jpg'
					},
					{
						text:'芽庄',
						url:'https://m.jhly.cn/Public/images/ver3/yz.jpg'
					},
					{
						text:'新加坡',
						url:'https://m.jhly.cn/Public/images/ver3/xjp.jpg'
					}
				]
			}
		},
		onLoad() {
			const { windowWidth, windowHeight } = uni.getSystemInfoSync();
			this.windowWidth = windowWidth/4 + 'px';
			// const [err,res] = await uni.getLocation({
			//     type: 'gcj02'
			// })
			// if(!res)return;
			// let lad = {
			// 	latitude:res.latitude
			// 	longitude:res.longitude
			// }
			// uni.chooseLocation({
			//     success: function (res) {
			// 		console.log('res',res)
			//         console.log('位置名称：' + res.name);
			//         console.log('详细地址：' + res.address);
			//         console.log('纬度：' + res.latitude);
			//         console.log('经度：' + res.longitude);
			//     }
			// });
			let that = this;
			// #ifdef MP-WEIXIN
				uni.getSetting({
					success(res) {
						if(res.authSetting['scope.userLocation']){
							that.initMapStore();
						}else{
							if(res.authSetting.hasOwnProperty('scope.userLocation')){
								uni.showModal({
									content:"检测到您没打开获取地址权限，是否去设置打开？",
									confirmText:'确认',
									cancelText:'取消',
									success:function({confirm}){
										if(confirm){
											that.handle()
										}
									},
									fail:function(err){
										console.log('modalFail',err)
									}
								})
							}else{
								uni.authorize({
									scope: 'scope.userLocation',
									success(res) { //1.1 允许授权
										that.initMapStore();
									},
									fail(){    //1.2 拒绝授权
										console.log("你拒绝了授权，无法获得周边信息")
									}
								})	
							}
						}
					}
				})
			// #endif
		},
		methods: {
			// test share
			toShare(){
				console.log('12',wx)
				
				// 分享图片
				// void plus.share.sendWithSystem('msg', ()=>{}, ()=>{});
				// uni.share({
				// 	provider: "weixin",
				// 	scene: "WXSceneTimeline",
				// 	type: 2,
				// 	imageUrl: "https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/d8590190-4f28-11eb-b680-7980c8a877b8.png",
				// 	success: function (res) {
				// 		console.log("success:" + JSON.stringify(res));
				// 	},
				// 	fail: function (err) {
				// 		console.log("fail:" + JSON.stringify(err));
				// 	}
				// });
			},
			
			
			async initMapStore(){
				const {data} = await this.$request('store','getAll');
				if(!data) return;
				if(!data.length) return;
				const fdata = data.filter(v=>{
					return v.address.location
				})
				if(!fdata.length) return;
				let empArr=[]
				fdata.forEach((v,i,a)=>{
					var lad = {
						latitude:v.address.location.lat,
						longitude:v.address.location.lng,
						i:i
					}
					empArr.push(lad)
				})
				this.getDistance(empArr).then(res=>{
					if(res.length){
						let arr = res.map((v,i)=>{
							return {
								distance:v.distance,
								storeName:fdata[i].storeName,
								address:fdata[i].address.address
							}
						});
						this.distanceArr =  arr.filter(v => v.distance < 10000).sort((a,b)=>a.distance-b.distance).slice(0,5);
						this.modalShow = true;
						// this.$modal({store:this.distanceArr})
					}
				})
			},
			handle(){
				let that = this;
				uni.openSetting({
				  success(res) {
					  if(res.authSetting['scope.userLocation']){
						  that.initMapStore();
					  }
				  },
				  fail(err){
					  console.log('err',err)
				  }
				});
			},
			getDistance(adres){
				return new Promise((resolve,reject)=>{
					qqmapsdk.calculateDistance({
						mode: 'straight',
						from:  '', //若起点有数据则采用起点坐标，若为空默认当前地址
						to: adres, //终点坐标
						success: function(res) {//成功后的回调
							resolve(res.result.elements)
						},
						fail: function(error) {
							reject(error)
						},
						complete: function(res) {
						  console.log('complete',res);
						}
					});
				})
			},
			goDestination(content,flag){
				uni.navigateTo({
				    url: '/pages/destination/destination_'+ (flag?'s':'f') +'?text='+content
				});
			},
			getSplitWidth(num){
				const { windowWidth, windowHeight } = uni.getSystemInfoSync();
				return (windowWidth/num);
			},
			getBanner(){
				//获取banner
			},
			goSearch(){
				uni.switchTab({
				    url: '/pages/classify/classify'
				});
			},
			// change(e) {
			// 	// 轮播切换事件
			// 	this.current = e.detail.current
			// },
			setTime(items) {
				var newItems = [];
				items.forEach(e => {
					newItems.push({
						author_name: e.author_name,
						cover: e.cover,
						id: e.id,
						post_id: e.post_id,
						published_at: dateUtils.format(e.published_at),
						title: e.title
					});
				});
				return newItems;
			}
		}
	}
</script>

<style>
	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}
	.swiper-item image{
		width: 90%;
	}
	
	.item-image{
		width: 50%;
		height: 50%;
	}
	.uni-align-items{
		align-items: center;
	}
	.uni-list{
	  padding-bottom: 60px;
	}
	
	.unit{
		flex-wrap:wrap;
	}
	
	.unit .unit-item{
		flex:0 0 50%;
		height: 150rpx;
		justify-content:center;
	}
	.unit .unit-describe{
		font-size: .9em;
		color: #777;
		width: 120px;
	}
	.unit .unit-item .unit-title{
		font-size: 1.3em;
		line-height: 1.4;
		font-weight: normal;
		color: #666;
	}
	.unit .img_box image{
		width: 100rpx;
		height: 100rpx;
	}
	.destination{
		width: 33%;
		display: inline-block;
		padding: 20rpx;
		box-sizing: border-box;
		text-align: center;
	}
	.destination image{
		width: 100%;
		height: 140rpx;
	}
	.modal-dialog{
		background: #fff;
		padding: 20rpx;
		border-radius: 10rpx;
	}
	.showF{
		font-size: 1rem;
		margin-top: 1rem;
	}
	/* .content{
	  padding-bottom: calc(var(--window-bottom) + 20px);
	} */
</style>
